
@extends('admin.common.common')

@section('head')
    <link rel="stylesheet" href="/webuploade/webuploader.css">
@endsection


@section('body')

    <article class="page-container">

        <div id="vue_hello">
            <form class="form form-horizontal" id="form-node-add" action="{{route('admin.article.store')}}"
                  method="post" enctype="multipart/form-data" @submit.prevent="dopost">
                @csrf
                @if ($errors->any())
                    <div class="Huialert-error Huialert">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章标题：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" name="title" placeholder="" v-model="info.title">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>作者姓名：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" name="author" placeholder="" v-model="info.author">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章简介：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" name="desn" placeholder="" v-model="info.desn">
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章封面：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <div id="picker">文件上传

                        </div>
                        <img src="" alt="" hidden id="img" width="150" height="150">
                        <input type="hidden" value="" name="pid" @change="pidchange" id="pid">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章内容：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <textarea name="body"@change="bodychange" id="body"></textarea>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>详情地址：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input name="address" class="input-text" >
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                        <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                    </div>
                </div>
            </form>
        </div>

    </article>
@endsection


@section('js')
    <script src="/webuploade/webuploader.js"></script>
    <script src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script  src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script src="/ueditor/ueditor.config.js"></script>
    <script src="/ueditor/ueditor.all.js"></script>
    <script src="/admin/static/vue3.0.js"></script>



    <script>
        //富文本
        var  ue = UE.getEditor('body')

        /*
        const {createApp} = Vue
        createApp({
            data(){
                return {
                    info:{
                        _token:"{{csrf_token()}}",
                        title:'',
                        author:'',
                        desn:'',
                        body:'',
                        pid:''
                    }
                }

            },
            //一定要加s
            methods:{
                //async await 把异步请求变成同步请求
                async dopost(env){
                    $('#form-node-add').validate({
                        rules:{
                            title:{
                                required:true
                            }
                        },
                        onkeyup:false,
                        focusCleanup:true,
                        success:"valid",
                        submitHandler:function (form) {

                        }
                    })
                    console.log(this.info.body)

                    let url = env.target.action;

                    let {error_code,msg} = await $.post(url,this.info)

                    if(error_code == 0){
                        layer.msg(msg,{icon:1,time:2000},function () {
                            location.href="{{route('admin.article.index')}}";
                        })
                    }else{
                        layer.msg(msg,{icon: 5})
                    }

                }


            }
        }).mount('#vue_hello')
        */

        //webloader文件同步上传
        var uploader = WebUploader.create({
            //是否自动上传
            auto:true,
            //swf文件路径
            swf:'/webuploade/yploader.swf',
            //文件提交方式
            method:"post",

            //携带参数
            formData:{
              _token: "{{csrf_token()}}"
            },
            //提交地址
            server:"{{route('admin.article.local_file')}}",
            //选择文件的按钮
            pick:'#picker',
            //不压缩文件
            resize:false

        });

        uploader.on('uploadSuccess',function (res,pid) {
            console.log(pid._raw);
            $('#img').show().attr('src',pid._raw)
            $('#pid').val('src',pid._raw)

        })
    </script>

@endsection
